<template>
  <div class="profile">
    <div class='profile-banner' v-if='!user.username'>
      <span class="photo"></span>
      <cube-button :light="true" class="btn" @click='toLogin'>登陆</cube-button>
    </div>
        <div class='profile-banner' v-else>
      <span class="photo"></span>
      <span class='btn-user'>{{user.username}}</span>
    </div>
    <ul class='profile-list'>
      <router-link tag='li' v-for='menu in user.menuList' :to='menu.path' :key='menu.path'>
        {{menu.name}}
      </router-link>
    </ul>
  </div>

</template>

<script>
import { mapState } from "vuex";
export default {
  data () {
    return {};
  },

  components: {},

  computed: {
    ...mapState(['user'])
  },

  methods: {
    toLogin(){
      // 跳转路由的同时记录原路由
      this.$router.push({path:'/login',query:{from:'profile'}}).catch(()=>{})
    }
  }
  
}
</script>
<style lang='less' scoped>
  .profile{
    &-banner{
    height: 200px;
    background: url('../../assets/images/user_bg.png');
    background-color: blue;
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    }
    &-list{
      font-size:14px;
      line-height:30px;
      li{
        display: flex;
        flex-direction:row;
        justify-content: space-between;
        border-bottom:1px solid #ccc;
        i{
          margin-right: 5px;
        }
        padding: 10px 25px;
      }
      
    }
    .photo{
      background: url('../../assets/images/photo.png');
      width: 80px;
      height: 80px;
      background-size:cover; //控制图片按比例伸缩
      display: block;
    }
    .btn{
      margin-top: 10px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0px;
      width: 30%;
    }
    .profile-banner{
      text-align: center;
    }
    .btn-user{
      color: #fff;
      margin-top: 10px;
      display: block;
    }
  }
</style>
